<template>
	<view class="login-container">
		<!-- 顶部装饰元素 -->
		<view class="decor-top"></view>

		<!-- 登录表单 -->
		<view class="login-form">
			<!-- 应用Logo和标题 -->
			<view class="app-header">
				<image src="/static/logo.png" class="app-logo"></image>
				<text class="app-title">中博纳油耗</text>
			</view>

			<!-- 表单标题 -->
			<view class="form-header">
				<text class="title">欢迎回来</text>
				<text class="subtitle">记录爱车油耗，从登录开始</text>
			</view>

			<!-- 用户名输入 -->
			<view class="input-group">
				<uni-icons type="person" size="20" color="#7fbc8d"></uni-icons>
				<input v-model="form.username" placeholder="请输入用户名" class="input" placeholder-class="placeholder" />
			</view>

			<!-- 密码输入 -->
			<view class="input-group">
				<uni-icons type="locked" size="20" color="#7fbc8d"></uni-icons>
				<input v-model="form.password" placeholder="请输入密码" password class="input"
					placeholder-class="placeholder" />
			</view>

			<!-- 记住我选项 -->
			<view class="remember-me">
				<checkbox-group @change="toggleRemember">
					<label class="checkbox">
						<checkbox :checked="rememberMe" color="#7fbc8d" />
						<text>记住我</text>
					</label>
				</checkbox-group>
			</view>

			<!-- 登录按钮 -->
			<button @click="handleLogin" :class="['login-btn', isFormValid ? 'active' : 'disabled']"
				:disabled="!isFormValid">
				登录
			</button>

			<!-- 注册链接 -->
			<view class="register-link">
				<text>没有账号？</text>
				<text @click="goToRegister" class="link-text">立即注册</text>
			</view>
		</view>

		<!-- 底部装饰元素 -->
		<view class="decor-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: '',
					password: ''
				},
				rememberMe: false
			}
		},
		computed: {
			isFormValid() {
				return this.form.username && this.form.password
			}
		},
		onLoad() {
			// 从缓存中获取记住的用户名
			const rememberUsername = uni.getStorageSync('rememberUsername')
			if (rememberUsername) {
				this.form.username = rememberUsername
				this.rememberMe = true
			}
		},
		methods: {
			toggleRemember(e) {
				this.rememberMe = e.detail.value.length > 0
			},

			async handleLogin() {
				if (!this.isFormValid) return

				try {
					uni.showLoading({
						title: '登录中...',
						mask: true
					})

					// 调用登录接口
					const res = await this.$api.login({
						username: this.form.username,
						password: this.form.password
					})
					// 保存token
					//this.$store.commit('SET_TOKEN', res.data.token)
					this.$store.commit('SET_TOKEN',res.data.token)
					this.$store.commit('SET_USER_INFO',res.data)
					// 记住用户名
					if (this.rememberMe) {
						uni.setStorageSync('rememberUsername', this.form.username)
					} else {
						uni.removeStorageSync('rememberUsername')
					}

					uni.hideLoading()
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					})

					// 登录成功后跳转到首页
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 1500)
				} catch (error) {
					uni.hideLoading()
					console.error("登录错误:", error)
					uni.showToast({
						title: error.message || '登录失败',
						icon: 'none'
					})
				}
			},

			goToRegister() {
				uni.navigateTo({
					url: '/pages/login/register'
				})
			}
		}
	}
</script>

<style lang="scss">
	.login-container {
		height: 100vh;
		background-color: #f8fffa;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	.decor-top {
		position: absolute;
		top: -150rpx;
		right: -150rpx;
		width: 300rpx;
		height: 300rpx;
		border-radius: 50%;
		background-color: rgba(127, 188, 141, 0.15);
	}

	.decor-bottom {
		position: absolute;
		bottom: -100rpx;
		left: -100rpx;
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		background-color: rgba(127, 188, 141, 0.1);
	}

	.login-form {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 60rpx;
		z-index: 1;
	}

	.app-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 60rpx;
	}

	.app-logo {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}

	.app-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #4a8d5b;
	}

	.form-header {
		margin-bottom: 60rpx;
		text-align: center;
	}

	.title {
		display: block;
		font-size: 40rpx;
		font-weight: bold;
		color: #4a8d5b;
		margin-bottom: 16rpx;
	}

	.subtitle {
		display: block;
		font-size: 28rpx;
		color: #7fbc8d;
	}

	.input-group {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #e0f0e5;
		margin-bottom: 40rpx;

		.input {
			flex: 1;
			height: 60rpx;
			margin-left: 20rpx;
			font-size: 30rpx;
			color: #4a8d5b;
		}

		.placeholder {
			color: #b8d9c2;
			font-size: 30rpx;
		}
	}

	.remember-me {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 40rpx;

		.checkbox {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #7fbc8d;
		}
	}

	.login-btn {
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 32rpx;
		color: white;
		background-color: #b8d9c2;
		border: none;
		transition: all 0.3s;

		&.active {
			background-color: #7fbc8d;
			box-shadow: 0 4rpx 12rpx rgba(127, 188, 141, 0.3);
		}

		&.disabled {
			opacity: 0.7;
		}
	}

	.register-link {
		text-align: center;
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #999;

		.link-text {
			color: #7fbc8d;
			margin-left: 10rpx;
		}
	}
</style>